<!--
 * @Author: lijing
 * @e-mail: 1413979079@qq.com
 * @LastEditors: lijing
 * @Date: 2019-10-17 16:14:21
 * @LastEditTime: 2020-04-26 23:05:02
 * @FilePath: \blog-pages\src\views\LeaveMessage.vue
 * @Description: 留言页面
 -->

<template>
  <div class="comm-con">
    <nav-bar></nav-bar>
    <b-container class="main bg-img">
      <h5>说点什么吧......</h5>
      <hr />

      <b-media>
        <template v-slot:aside>
          <b-img
            rounded="circle"
            width="60"
            height="60"
            :src="commToken == true ? userInfo.avatarUrl : '/static/images/no-name.png'"
          ></b-img>
        </template>
        <h6 thumbnail v-text="commToken == true ? userInfo.name : '匿名用户'"></h6>
        <b-textarea rows="5" placeholder="请输入留言内容......" v-model="message"></b-textarea>
        <b-button class="pull-right" variant="success" @click="leaveAMessage()">提交</b-button>
      </b-media>
      <hr />
      <marquee direction="up" behaviour="scroll" height="300px" scrollamount="5">
        <b-media v-for="(m,index) in messages" :key="index" class="message">
          <template v-slot:aside>
            <b-img
              rounded="circle"
              width="60"
              height="60"
              :src="m.creatorId == 0 ? '/static/images/no-name.png' : m.avatarUrl"
            ></b-img>
          </template>
          <h6 thumbnail v-text="m.creatorId == 0 ? '匿名用户' : m.creatorName"></h6>
          <p>{{m.content}}</p>
          <small>{{m.gmtCreate}}</small>
        </b-media>
      </marquee>
    </b-container>
    <Footer></Footer>
  </div>
</template>

<script>
import { mapState } from "vuex";
import url from "@/request/url";
export default {
  name: "LeaveMessage",
  data() {
    return {
      messages: [],
      message: ""
    };
  },
  components: {
    Footer: () => import("@/components/Footer"),
    NavBar: () => import("@/components/NavBar")
  },
  computed: {
    ...mapState({
      commToken: state => state.app.commToken,
      userInfo: state => state.user.userInfo
    })
  },
  methods: {
    leaveAMessage() {
      if (this.message.trim() != "") {
        let messageInfo = {
          creatorId: this.commToken ? this.userInfo.id : 0,
          content: this.message
        };
        this.$axios.post(url.comm.message, messageInfo).then(res => {
          console.log(res);
          this.getMessages();
          this.message = "";
        });
      }
    },
    getMessages() {
      this.$axios.get(url.comm.message).then(resp => {
        this.messages = resp.data;
      });
    }
  },
  activated() {
    this.getMessages();
  }
};
</script>

<style scoped>
textarea {
  margin-bottom: 10px;
}
h6 {
  font-weight: bold;
}
.pull-right {
  float: right;
}
.message {
  border: solid rgb(239, 239, 239) 1px;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
}
</style>